<ol class="breadcrumb">
    <li> <i class="fa fa-anchor"></i>
        &nbsp;服务商管理
    </li>
    <li>服务商列表</li>
</ol>

<div class="col-xs-12 info-center">
    <div class="bs-callout bs-callout-warning">
        <h4>
            系统使用单位: <strong>{:C('COLLEGE_NAME')}</strong>
        </h4>
        <form id="add_school" action="__URL__/addService" method="post">

            <div class="col-xs-6 search-col">
                <div class="input-group">
                    <input type="text" class="form-control" name="oper_name" id="school" placeholder="服务商名称">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">&nbsp;运营电话</button>
                    </span>
                    <input type="text" class="form-control" name="tel" id="" placeholder="运营电话">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="fa fa-plus"></i>&nbsp;新增服务商</button>
                    </span>
                </div>
            </div>
        </form>
        <div class="clearfix"></div>
    </div>
</div>

<div class="col-xs-12 info-center">
    <div class="panel panel-mcit">
        <div class="panel-heading"> <i class="fa fa-list"></i>
            &nbsp;&nbsp;充电运营服务商
        </div>
        <table class="table table-bordered ">
            <tbody id="DataTableContent">
            <tr id="school_list">
                <th>服务商名称</th>
                <th width="10%">运营电话</th>
                <th width="5%">修改</th>
                <th width="10%">城市管理</th>
                <th width="5%">删除</th>
            </tr>
            <empty name="services">
                <td colspan="99" style="text-align:center" class="danger"> <strong><i class="fa fa-meh-o"></i>
                    &nbsp;&nbsp;请添加充电运营服务商</strong>
                </td>
                <else />
                <volist name="services" id="data">
                    <tr>
                        <td>
                            <p class="school_text">{$data.oper_name}</p>
                            <div class="col-xs-6" style="display:none">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <a class="btn btn-default btn-sm">&nbsp;名称:</a>
                                    </span>
                                    <input type="text" class="form-control input-sm school_input" value="{$data.oper_name}" name="oper_name" style="width: 150px">
                                    <span class="input-group-btn">
                                        <a class="btn btn-default btn-sm">&nbsp;TEL:</a>
                                    </span>
                                    <input type="text" class="form-control input-sm school_input" value="{$data.tel}" name="tel" style="width: 100px">
                                    <span class="input-group-btn">
                                        <a class="btn btn-default btn-sm edit_school" data-old="{$data.oper_name}" data-nid="{$data.tel}" data-id="{$data.id}"><i class="fa fa-refresh"></i>&nbsp;保存</a>
                                    </span>
                                </div>
                            </div>
                        </td>
                        <td>{$data.tel}</td>
                        <td>
                            <a class="btn btn-sm btn-warning editSchool"><i class="fa fa-edit"></i>&nbsp;修改</a>
                        </td>
                        <td>
                            <a class="btn btn-sm btn-primary addCity" data-id="{$data.id}"><i class="fa fa-edit"></i>&nbsp;下属城市</a>
                        </td>
                        <td>
                            <a class="btn btn-sm btn-danger del_school" data-id="{$data.id}"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
                        </td>
                    </tr>
                </volist>
            </empty>
            </tbody>
        </table>
    </div>
</div>
<import type='css' file="css.jquery#autocomplete" />
<import file="js.jquery#autocomplete#min" />
<script type="text/javascript">
    var editSchoolObj;
    var removeSchoolObj;
    $(document).ready(function () {
        //添加
        $("#add_school").ajaxForm({
            dataType:'json',
            clearForm:true,
            beforeSubmit:function(){
                if($("#school").val()==''){
                    alertify.error("请填写要添加的服务商名称");
                    return false;
                }
                return true
            },
            success:function(data){
                if(data.state==100){
                    alertify.success(data.msg);
                    location.href = data.url;
                }else{
                    alertify.error(data.msg);
                }
            }
        });
        //删除
        $("#DataTableContent").on("click",'.del_school',function(){
            var id = $(this).attr('data-id');
//            alertify.success(id);
            removeSchoolObj = $(this).parents('tr');
            alertify.confirm("确定要删除此服务商吗？", function (e) {
                if (e) {
                    $.ajax({
                        type: "POST",
                        url:  '{:U("Services/delServices")}',
                        data: {id:id},
                        dataType: "json",
                        success: function(data){
                            if(data.state==100){
                                alertify.success(data.msg);
                                removeSchoolObj.next().remove();
                                removeSchoolObj.remove();
                            }else{
                                alertify.error(data.msg);
                            }
                        }
                    });
                } else {
                    alertify.error("取消操作！");
                }
            }, "mcit_default");

        });

        $("#DataTableContent").on("click",'.editSchool',function(){
            var obj  = $(this).parent().prev().prev();
            obj.find('.school_text').hide();
            obj.find('.col-xs-6').show();
        });

        //修改
        $("#DataTableContent").on("click",'.edit_school',function(){
            editSchoolObj  = $(this).parents('.col-xs-6');
            var oper_name  = $(this).parent().prev().prev().prev().val();
            var tel        = $(this).parent().prev().val();
            var id         = $(this).attr('data-id');
            var old        = $(this).attr('data-old');
            var oldTel     = $(this).attr('data-nid');
//            alertify.success(id);
//            alertify.success(old);
//            alertify.success(oper_name);
//            alertify.success(tel);
            if(old == oper_name && tel == oldTel){
                alertify.success("保存成功");
                editSchoolObj.hide();
                editSchoolObj.prev().show();
            }else{
                $.ajax({
                    type: "POST",
                    url:  '{:U("Services/editServices")}',
                    data: {id:id,oper_name:oper_name,tel:tel},
                    dataType: "json",
                    success: function(data){
                        if(data.state==100){
                            alertify.success(data.msg);
                            editSchoolObj.hide();
                            editSchoolObj.find('.edit_school').attr('data-old',data.oper_name);
                            editSchoolObj.find('.edit_school').attr('data-nid',data.tel);
                            editSchoolObj.prev().html(data.oper_name);
                            editSchoolObj.parent().next().html(data.tel);
                            editSchoolObj.prev().show();
                        }else{
                            alertify.error(data.msg);
                        }
                    }
                });
            }
        });
        //城市管理
        $("#DataTableContent").on("click",'.addCity',function(){
            var id = $(this).attr("data-id");
            location.href = "__URL__/scity/id/"+id;
        });
    })
</script>